<template>
    <navigation></navigation>
    <div class="bg-gray-50 max-h-1024">
        <div class="max-w-1440 mx-auto px-8 py-6 h-full flex flex-col">
            <nav class="flex items-center gap-2 mb-8 text-gray-600">
                <router-link to="/" class="hover:text-primary">首页</router-link>
                <el-icon><ArrowRight class="text-xs" /></el-icon>
                <router-link to="#" class="hover:text-primary">个人中心</router-link>
                <el-icon><ArrowRight class="text-xs" /></el-icon>
                <span class="text-gray-400">用户信息</span>
            </nav>
            <el-card class="mb-8">
                <div class="flex gap-8">
                    <div class="relative">
                        <el-avatar :size="80" :src="avatarUrl" class="border-4 border-blue-100" />
                        <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-primary rounded-full flex items-center justify-center cursor-pointer hover:opacity-90">
                            <el-icon color="#ffffff"><Camera /></el-icon>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-x-24 gap-y-4">
                        <div v-for="(item, index) in userInfo" :key="index">
                            <div class="text-gray-500 text-sm mb-1">{{ item.label }}</div>
                            <div>{{ item.value }}</div>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card class="flex-grow">
                <template #header>
                    <div class="border-b border-gray-100 pb-4">
                        <span class="text-lg font-medium border-b-2 border-primary pb-4">基础信息</span>
                    </div>
                </template>
                <el-form :model="form" label-width="120px" class="h-full flex flex-col">
                    <div class="flex-grow">
                        <el-form-item label="原密码" required>
                            <el-input v-model="form.newPassword" type="password" placeholder="请输入原密码" />
                        </el-form-item>
                        <el-form-item label="新密码" required>
                            <el-input v-model="form.confirmPassword" type="password" placeholder="请输入新密码" />
                        </el-form-item>
                        <el-form-item label="确认密码" required>
                            <el-input v-model="form.address" placeholder="请再次输入新密码" />
                        </el-form-item>
                    </div>
                    <el-form-item class="mt-auto flex flex-col">
                        <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="onSubmit">保存</el-button>
                        <el-button link type="primary" @click="onCancel" class="custom-button">取消保存</el-button>
                    </el-form-item>
                    <el-form-item class="mt-2 flex flex-col">
                        <router-link to="/forgetPassword" class="text-blue-500 hover:underline">忘记密码？</router-link>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { ArrowRight, Camera } from '@element-plus/icons-vue';
import navigation from "../../views/navigation.vue";

const avatarUrl = ref('https://ai-public.mastergo.com/ai/img_res/baf12d0611df6261f935b21d08cb8446.jpg');
const userInfo = [
    { label: '编号', value: '2100770533' },
    { label: '性别', value: '女' },
    { label: '姓名', value: '陈秋华' },
    { label: '学校', value: '天津理工大学工程教育' },
    { label: '人员类型', value: '在校生' },
    { label: '专业', value: '机械工程' },
];
const form = ref({
    newPassword: '',
    confirmPassword: '',
    address: '',
});

const onSubmit = () => {
    ElMessage.success('保存成功');
};

const onCancel = () => {
    form.value = {
        newPassword: '',
        confirmPassword: '',
        address: '',
    };
    ElMessage.info('已取消保存');
};
</script>


<style scoped>
:deep(.el-input__wrapper) {
    padding: 0.5rem 1rem;
}
:deep(.el-button) {
    padding: 0.5rem 2rem;
}
:deep(.el-form-item__label) {
    font-weight: normal;
    color: #374151;
}
.max-w-1440 {
    min-width: 1440px;
}

.min-h-1024 {
    max-height: 1024px;
}

.custom-button {
    background-color: #409EFF !important; /* 假设这是你的主色 */
    color: white !important;
    padding: 10px 20px !important; /* 根据需要调整 */
    border-radius: 5px !important; /* 圆角大小 */
    border: none !important;
    cursor: pointer !important;
}

.custom-button:hover {
    opacity: 0.9 !important;
}


</style>


